<template>
  <div class="wx-home" :style="{ zIndex: wxZIndex }">
    <!-- 功能列表 -->
    <div class="wx-list">
      <div class="wx-head">
        <img :src="require('@/assets/head.jpg')" alt="" />
      </div>
      <div v-for="item in wxList" :key="item.name">
        <ion-icon :name="item.name" class="wx-icon"></ion-icon>
      </div>
    </div>
    <!-- 功能展示  -->
    <!-- 信息列表 -->
    <u-message></u-message>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import UMessage from './message.vue';
export default {
  props: {
    wxZIndex: { type: String, default: '2' }
  },
  setup() {
    //应用列表
    let wxList = ref([
      {
        name: 'chatbubble-outline'
      },
      {
        name: 'person-outline'
      }
    ]);

    return {
      wxList
    };
  },
  components: {
    UMessage
  }
};
</script>

<style scoped lang="scss">
.wx-home {
  width: 700px;
  height: 600px;
  border: 1px solid #ccc;
  display: flex;
  background: #f7f7f7;
  box-sizing: border-box;
  .wx-list {
    width: 50px;
    height: 100%;
    background: rgb(112, 119, 131);
    display: flex;
    align-items: center;
    flex-direction: column;

    .wx-head {
      width: 35px;
      height: 35px;
      border: 1px solid #000;
      margin: 30px 0;
      cursor: pointer;

      img {
        width: 100%;
      }
    }
    .wx-icon {
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}
</style>
